Tailwind CSS

2022-04-09 · 阅读 5057 · 字数 481

顺风 CSS Tailwind 中文意思是顺风。而我一直以为这个单词的意思是台风。。。 实际上台风是，typhoon。 为何要使用 Tailwind CSS 在写小程序样式的时候，为了排版方便，我自己也形成了一套基于 flex 的布局 class，跟 tailwind css 的理念是一样的，确实写起来很快 Tailwind CSS 官网整理出来所有的 class，可以一目了然地对比各种样式的区别，比自己去挨个尝试方便多了 安装 Tailwind 如果本机没有 npm 或 npx 可以参考这里安装最新的 node，自带了 npm，npx。 npm install -D tailwindcs ...

阅读全文...

2022-06-10 · 阅读 7418 · 字数 260

Mobile First 其实跟不用 Tailwind 时，纯手写 CSS 的原则是一样的，那就是： Mobile First 即，先写手机端的样式，然后逐一写更宽屏幕的样式。 而在 Tailwind CSS 中，Mobile First 就是先写不加 breakpoint (sm, md, lg ...) 前缀的 class。 例如： <img class="w-16 sm:w-20 md:w-32 lg:w-48" src="..."> sm breakpoint 的正确理解 Where this approach surpris ...

阅读全文...

2022-08-04 · 阅读 7818 · 字数 151

目标 PC/手机自适应 官方现成组件 Headers https://tailwindui.com/components/marketing/elements/headers https://tailwindui.com/components/application-ui/navigation/navbars 需要 JS 代码量不小。也许可以精简一下 还是不引入三方 js 的好，也不复杂。目前采用这个方案。 实际效果演示： https://www.sunzhongwei.com/tools2/combine-images daisyui 的 navbar 组件 daisyui 是基于 ...

阅读全文...

2022-04-23 · 阅读 3936 · 字数 244

需求背景 在一套网站代码里，嵌入多套页面模板主题。 这样就需要每个独立的主题都有一个独立的 css 文件。 而我使用的 tailwind css，那么就需要对每个 css 文件进行编译。原来的单一文件配置，需要做下调整。 现有的 tailwind 编译机制 Makefile 中的快捷命令： .PHONY: tailwind tailwind: npx tailwindcss -i ./css/main.css -o ./public/css/main.css --watch tailwind 配置文件： > cat tailwind.config.js module.exports ...

阅读全文...